<template>
    <div class="test-page">
       ****
       <Comp title="comp" :render-content="renderContent">
            <template v-slot:default="{name, age}">
                <span @click="clickSlot(name, age)"> {{ name }} and {{ age }}</span>
            </template>
            {/*<template v-slot:middle="{slotData}">
                <span>{{slotData.name}}---------{{slotData.user}}</span>
            </template>*/}
            <template v-slot:middle="{slotData}">
                <span>{{slotData.slotName}} ---- {{slotData.user}}</span>
            </template>
       </Comp>
    </div>
</template>

<script>
import Comp from "@/components/comp/index.vue";
export default {
    name: "Cart",
    data() {
        return {
            msg: 'Cart-page'
        }
    },

    created() {
        this.addCurrPage2Vuex();
    },

    methods: {
        renderContent(h, obj) {
            return <span vOn:click={this.renderClick.bind(this)}>my name is {obj.name} and {obj.age}</span>;
        },

        renderClick() {
            console.log(this.$options, this.$options.name);
        },

        clickSlot(name, age) {
            console.log(name, age)
        }
    },

    components: {
        Comp
    }
}
</script>

<style scoped lang="scss" src="./scss/index.scss"></style>